<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/echarts.css">
</head>
<style>
    /* 去除默认间距 */
    html {
        font-size: 16px;
    }

    * {
        margin: 0px;
        padding: 0px;
    }

    /* 容器 */
    #app {
        width: 1920px;
        height: 1080px;

    }






    /* 容器=>container */
    .container {
        height: 100%;
        width: 100%;
        background: url("img/bg_02.png") no-repeat 0px 0px;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
    }

    /*  */
    /*  */
    /*  */
    /* container=>上部 */
    .container>.top {
        background: url("img/bg_topg_02.png") no-repeat 0px 0px;
        background-size: 100% 100%;
        flex: 0.0741;
        display: flex;
        align-items: center;
        justify-content: center;
    }



    /* container=>上部=>文字*/
    .container>.top>div:nth-of-type(1) {
        font-size: 2rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ADE962;
        background: linear-gradient(0deg, #4490EF 0%, #6DF7FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


    /*  */
    /*  */
    /*  */
    /* container=>下部 */
    /*  */
    /*  */
    /*  */

    .container>.bottom {
        flex: 0.9259;
        display: flex;
        flex-direction: column;
    }



    /*  */
    /*  */
    /* container=>下部=>上部 */
    /*  */
    /*  */

    .container>.bottom>.header {
        flex: 0.12;
        display: flex;
        align-items: center;
    }

    .container>.bottom>.header>ul {
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: row;
        list-style: none;
    }

    .container>.bottom>.header>ul li {
        flex: 1;
        background: url("img/bg_bq@2x.png") no-repeat center center;
        background-size: 85% 120%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .container>.bottom>.header>ul li>div:nth-of-type(1) {
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 800;
        color: #D5D5D5;
        background: linear-gradient(0deg, rgba(222, 242, 255, 0.75) 0%, rgba(96, 195, 232, 0.75) 93.8720703125%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .container>.bottom>.header>ul li>div:nth-of-type(2)>span:nth-of-type(1) {
        font-size: 1.5rem;
        font-family: Electrolize;
        font-weight: 400;
        color: #00FFF0;

        background: linear-gradient(0deg, #00CBD4 0%, #12FFFC 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .container>.bottom>.header>ul li>div:nth-of-type(2)>span:nth-of-type(2) {
        font-size: .8125rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #c3c3c7;
    }











    /*  */
    /*  */
    /*  */
    /* container=>下部=>中部 */
    .container>.bottom>.center {
        flex: 0.60;
        display: flex;
    }

    /* .center-left {
        flex: 0.245;
        background: red;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url(img/tit02@2x.png) no-repeat center center;
        background-size: 77% 5%;
    } */

    /*   */
    .center-center {
        flex: 0.333;
        display: flex;
        flex-direction: column;
        background: url("img/bg_kuang02@2x.png") no-repeat center center;
        background-size: 100% 100%;

    }

    .center-center>.t-top {
        flex: 1;
        background: url(img/tit03@2x.png) no-repeat 6% center;
        background-size: 4% 45%;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

    }

    .center-center>.t-top>div:nth-of-type(1) {
        width: 89%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 1.125rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #33EBF5;
        background: linear-gradient(0deg, #4490EF 0%, #6DF7FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .center-center>.t-center {
        flex: 4.5;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .center-center>.t-center>div:nth-of-type(1) {
        width: 76%;
        height: 100%;
        background: rgb(89, 0, 255);
        background: url(img/bg_tjsj@2x.png) no-repeat center -2%;
        background-size: 102% 80%;
        display: flex;
        flex-direction: column;

    }

    .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(1) {
        flex: 18;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6875rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        text-shadow: 0 0 10px #009688, 0 0 0px #009688, 0 0 13px #fff, 0 0 0px #00a67c, 0 0 0px #00a67c, 0 0 0px #00a67c, 0 0 0px #00a67c;
    }

    .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2) {
        flex: 82;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul {
        display: flex;
        list-style: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 45%;
    }

    .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul li {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul>li:nth-of-type(1) {
        margin-top: -3%;
        width: 100%;
        height: 100%;
    }

    .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul>li:nth-of-type(2) {
        margin-left: -1%;
        margin-top: 15%;

        width: 100%;
        height: 100%;
    }


    .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul>li:nth-of-type(3) {
        margin-left: 4%;
        margin-top: 15%;


        width: 100%;
        height: 100%;
    }

    .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul>li:nth-of-type(4) {
        margin-top: -3%;
        width: 100%;
        height: 100%;
    }


    .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul li>div:nth-of-type(1) {
        font-size: 1.625rem;
        font-family: Electrolize;
        font-weight: 400;
        color: #31E536;
    }

    .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul li>div:nth-of-type(2) {
        font-size: .75rem;
        font-family: Electrolize;
        font-weight: 400;
        color: #31E536;
    }

    .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul li>div:nth-of-type(3) {
        font-size: 1.25rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        margin-top: 25%;
    }

    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    .center-center>.t-bottom {
        flex: 4.5;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .center-center>.t-bottom>div:nth-of-type(1) {
        width: 88%;
        /* background: chartreuse; */
        height: 100%;
        display: flex;
        flex-direction: column;
    }



    .center-center>.t-bottom>div:nth-of-type(1)>div:nth-of-type(1) {
        flex: 1;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .center-center>.t-bottom>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1) {
        height: 77%;
        width: 100%;
        background: url("img/bg_jrsjl@2x.png") no-repeat center center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .jr-left {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .jr-right {
        flex: 2;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .jr-left>span:nth-of-type(1) {
        font-size: 1.125rem;
        font-family: Microsoft YaHei;
        font-weight: 600;
        color: #7ECEF4;
        background: linear-gradient(0deg, #02F7F8 0%, #0590FE 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

    }

    .jr-left>span:nth-of-type(2) {
        font-size: .75rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #7ECEF4;
        background: linear-gradient(0deg, #02F7F8 0%, #0590FE 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

    }

    .jr-right>ul {
        list-style: none;
        display: flex;
        width: 82.6%;
        height: 43%;
        align-items: center;
        justify-content: center;
        margin-left: -4%;
    }

    .jr-right>ul li {
        flex: 1;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 2.0625rem;
        font-family: zcoolqingkehuangyouti;
        font-weight: 400;
        color: #FFFFFF;
        text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
    }




    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    .center-center>.t-bottom {
        flex: 4.5;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .center-center>.t-bottom>div:nth-of-type(1) {
        width: 88%;
        /* background: chartreuse; */
        height: 100%;
        display: flex;
        flex-direction: column;
    }



    .center-center>.t-bottom>div:nth-of-type(1)>div:nth-of-type(2) {
        flex: 1;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .center-center>.t-bottom>div:nth-of-type(1)>div:nth-of-type(2)>div:nth-of-type(1) {
        height: 77%;
        width: 100%;
        background: url("img/bg_jrsjl@2x.png") no-repeat center center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .jr-left {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .jr-right {
        flex: 2;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .jr-left>span:nth-of-type(1) {
        font-size: .875rem;
        font-family: Microsoft YaHei;
        font-weight: 600;
        color: #7ECEF4;
        background: linear-gradient(0deg, #02F7F8 0%, #0590FE 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

    }

    .jr-left>span:nth-of-type(2) {
        font-size: .75rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #7ECEF4;
        background: linear-gradient(0deg, #02F7F8 0%, #0590FE 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

    }

    .jr-right>ul {
        list-style: none;
        display: flex;
        width: 82.6%;
        height: 43%;
        align-items: center;
        justify-content: center;
        margin-left: -4%;
    }

    .jr-right>ul li {
        flex: 1;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 2.0625rem;
        font-family: zcoolqingkehuangyouti;
        font-weight: 400;
        color: #FFFFFF;
        text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
    }

    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    .center-center>.t-bottom>div:nth-of-type(1)>div:nth-of-type(2) {
        flex: 1;
        height: 100%;
        width: 100%;
    }

    /*  */
    .center-right {
        flex: 0.421;
        display: flex;

    }

    .center-right>div:nth-of-type(1) {
        flex: 1;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .center-right>div:nth-of-type(1)>div:nth-of-type(1) {
        width: 93.5%;
        height: 100%;
        background: url("img/bg_kuang03@2x.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .center-right>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1) {
        display: flex;
        flex-direction: column;
        height: 93.4%;
        /* background: red; */
        width: 100%;
        align-items: center;
        justify-content: center;

    }


    .center-right>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1)>.top-top {
        flex: 0.039;
        /* background: blue; */
        background: url(img/tit01@2x.png) no-repeat center 0px;
        background-size: 94% 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 1.125rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #33EBF5;

    }

    .center-right>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1)>ul {
        flex: 0.961;
        display: flex;
        flex-direction: column;
        list-style: none;
        height: 100%;
        width: 87.3%;
    }

    .center-right>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1)>ul li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* align-content:center */

    }


    .center-right>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(1) {
        flex: 1;
        /* background: cyan; */
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
    }

    .center-right>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(2) {
        flex: 1;
        background: rgb(255, 0, 234);
        height: 100%;
        width: 100%;
        background: url("img/bq_jrdw@2x.png") no-repeat center center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .center-right>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(2)>div:nth-of-type(1) {
        flex: 0.4;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #C6EF18;
    }

    .center-right>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(2)>div:nth-of-type(2) {
        flex: 0.6;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .center-right>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(2)>div:nth-of-type(2)>span:nth-of-type(1) {
        flex: 8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #99DDFF;
    }

    .center-right>div:nth-of-type(1)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(2)>div:nth-of-type(2)>span:nth-of-type(2) {
        flex: 2;
        font-size: .75rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
    }

    .center-right>div:nth-of-type(2) {
        flex: 1;
        width: 100%;
        height: 100%;
        /* background: chartreuse; */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .center-right>div:nth-of-type(2)>div:nth-of-type(1) {
        width: 93.5%;
        height: 100%;
        background: purple;
        background: url("img/bg_kuang03@2x.png") no-repeat;
        background-size: 100% 100%;
    }



    .center-right>div:nth-of-type(2)>div:nth-of-type(1) {
        width: 93.5%;
        height: 100%;
        background: url("img/bg_kuang03@2x.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .center-right>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(1) {
        display: flex;
        flex-direction: column;
        height: 93.4%;
        /* background: red; */
        width: 100%;
        align-items: center;
        justify-content: center;

    }


    .center-right>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(1)>.left-left {
        flex: 0.039;
        /* background: blue; */
        background: url(img/tit01@2x.png) no-repeat center 0px;
        background-size: 94% 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 1.125rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #33EBF5;

    }

    .center-right>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(1)>ul {
        flex: 0.961;
        display: flex;
        flex-direction: column;
        list-style: none;
        height: 100%;
        width: 87.3%;
    }

    .center-right>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(1)>ul li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* align-content:center */
        background: url(img/bq_gdwgx@2x.png) no-repeat -97% 187%;
        background-size: 101% 85%;

    }

    .center-right>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(1)>ul>li:nth-of-type(2) {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* align-content:center */
        background: url(img/bq_gdwgx@2x.png) no-repeat -97% 187%;
        background-size: 101% 85%;
    }

    .center-right>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(1) {
        flex: 1;
        /* background: cyan; */
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        margin-left: 10%;
    }

    .center-right>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(2) {
        flex: 1;
        /* background: rgb(255, 0, 234); */
        height: 100%;
        width: 100%;
        /* background: url("img/bq_jrdw@2x.png") no-repeat center center;
        background-size: 100% 100%; */
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .center-right>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(2)>div:nth-of-type(1) {
        flex: 0.75;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: baseline;
        justify-content: center;
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #C6EF18;
    }

    .center-right>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(2)>div:nth-of-type(2) {
        flex: 0.2;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;

    }

    .center-right>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(2)>div:nth-of-type(1)>span:nth-of-type(1) {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 1.5rem;
        font-family: Myriad Pro;
        font-weight: 400;
        color: #00DEFF;

        background: linear-gradient(0deg, #0072E7 0%, #00EBFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .center-right>div:nth-of-type(2)>div:nth-of-type(1)>div:nth-of-type(1)>ul li>div:nth-of-type(2)>div:nth-of-type(1)>span:nth-of-type(2) {
        flex: 2;
        font-size: .75rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #00DEFF;
        background: linear-gradient(0deg, #0072E7 0%, #00EBFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 2%;
    }






    /*  */
    /*  */
    /*  */
    /* container=>下部=>下部 */
    .container>.bottom>.footer {
        flex: 0.28;
        /* background: red; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container>.bottom>.footer>.footer-content {
        width: 98.5%;
        height: 86%;
        background: url("img/bg_kuang04@2x.png") no-repeat center center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
    }

    /*  */
    .container>.bottom>.footer>.footer-content>.footer-content-top {
        flex: 0.2678;
        /* background:greenyellow ; */
        display: flex;
        flex-direction: row;

    }

    .container>.bottom>.footer>.footer-content>.footer-content-top>div:nth-of-type(1) {
        flex: 0.0096;
        /* background: crimson; */
    }

    .container>.bottom>.footer>.footer-content>.footer-content-top>div:nth-of-type(2) {
        flex: 0.0192;
        /* background: rebeccapurple; */
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    /* 下面三个自适应要修改样式 */
    .container>.bottom>.footer>.footer-content>.footer-content-top>div:nth-of-type(2)>div:nth-of-type(1) {
        width: 5px;
        height: 26px;
        background: #02b8da;
        opacity: 0.8;

    }

    .container>.bottom>.footer>.footer-content>.footer-content-top>div:nth-of-type(2)>div:nth-of-type(2) {
        width: 5px;
        height: 15px;
        background: #038fb5;
        opacity: 0.8;

    }

    .container>.bottom>.footer>.footer-content>.footer-content-top>div:nth-of-type(2)>div:nth-of-type(3) {
        width: 5px;
        height: 8px;
        background: #056790;
        opacity: 0.8;

    }




    /*  */
    .container>.bottom>.footer>.footer-content>.footer-content-top>div:nth-of-type(3) {
        flex: 0.9712;
        /* background: blue; */
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: Microsoft YaHei;
        font-size: 1.125rem;
        color: #33EBF5;
        font-weight: bold;
        padding-left: 0.2%;
    }



    /*  */
    .container>.bottom>.footer>.footer-content>.footer-content-bottom {
        flex: 0.7322;
        /* background: indianred; */
        display: flex;
        justify-content: space-around;
    }

    .container>.bottom>.footer>.footer-content>.footer-content-bottom>ul {
        display: flex;
        list-style: none;
        align-items: center;
        justify-content: center;
        width: 90%;
        /* background: chartreuse; */
    }

    .container>.bottom>.footer>.footer-content>.footer-content-bottom>ul li {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container>.bottom>.footer>.footer-content>.footer-content-bottom>ul li>div:nth-of-type(1) {
        /* background: red; */
        flex: 2;
        height: 100%;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    /* 这里自适应要改像素 */
    /* 这里自适应要改像素 */
    /* 这里自适应要改像素 */
    .container>.bottom>.footer>.footer-content>.footer-content-bottom>ul li>div:nth-of-type(1)>div:nth-of-type(1) {
        flex: 2;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("img/bq_mls@2x.png") no-repeat 25px center;
        background-size: 90% 80%;
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #EBE0DB;
        line-height: 18px;

    }

    .container>.bottom>.footer>.footer-content>.footer-content-bottom>ul li>div:nth-of-type(1)>div:nth-of-type(2) {
        flex: 1;
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #BDF6FF;
        line-height: 20px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
    }


    .container>.bottom>.footer>.footer-content>.footer-content-bottom>ul li>div:nth-of-type(2) {
        /* background: fuchsia; */
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .container>.bottom>.footer>.footer-content>.footer-content-bottom>ul li>div:nth-of-type(2)>div:nth-of-type(1) {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container>.bottom>.footer>.footer-content>.footer-content-bottom>ul li>div:nth-of-type(2)>div:nth-of-type(2) {
        flex: 1;
        height: 100%;
        width: 100%;
    }

    .container>.bottom>.footer>.footer-content>.footer-content-bottom>ul li>div:nth-of-type(2)>div:nth-of-type(1)>span:nth-of-type(1) {
        font-size: 1.5rem;
        font-family: Electrolize;
        font-weight: 400;
        color: #BDF6FF;

        background: linear-gradient(0deg, #EEFA94 0%, #BC8E42 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-right: 5%;

    }

    .container>.bottom>.footer>.footer-content>.footer-content-bottom>ul li>div:nth-of-type(2)>div:nth-of-type(1)>span:nth-of-type(2) {
        font-size: .75rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #BDF6FF;
        margin-left: 5%;

    }






    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /* 16：9  的媒体查询 */
    /* 响应式布局，当屏幕小于1680px改变#app宽高 */
    @media screen and (max-width: 1680px) {
        html {
            font-size: 15px;
        }

        #app {
            width: 1680px;
            height: 1050px;
        }

    }

    /* 响应式布局，当屏幕小于1600px改变#app宽高 */
    @media screen and (max-width: 1600px) {
        html {
            font-size: 14px;
        }

        #app {
            width: 1600px;
            height: 900px;
        }

    }

    /* 响应式布局，当屏幕小于1440px改变#app宽高 */
    @media screen and (max-width: 1440px) {
        #app {
            width: 1440px;
            height: 900px;

        }

        html {
            font-size: 13px;
        }


    }

    /* 响应式布局，当屏幕小于1400px改变#app宽高 */
    @media screen and (max-width: 1400px) {


        #app {
            width: 1400px;
            height: 1050px;

        }

        html {
            font-size: 12px;
        }
        .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul>li:nth-of-type(2){
            margin-top: 20%;
        }
        .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul>li:nth-of-type(3){
            margin-top: 20%;
        }

    }




    /* 响应式布局，当屏幕小于1360px改变#app宽高 */
    @media screen and (max-width: 1360px) {


        #app {
            width: 1360px;
            height: 768px;

        }

        html {
            font-size: 10px;
        }
        .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul>li:nth-of-type(2){
            margin-top: 18%;
        }
        .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul>li:nth-of-type(3){
            margin-top: 18%;
        }
        

    }





    /* 响应式布局，当屏幕小于1280px改变#app宽高 */
    @media screen and (max-width: 1280px) {


        #app {
            width: 1280px;
            height: 720px;

        }

        html {
            font-size: 9px;
        }
    }

    /* 响应式布局，当屏幕小于1152px改变#app宽高 */
    @media screen and (max-width: 1152px) {


        #app {
            width: 1152px;
            height: 864px;

        }

        html {
            font-size: 8px;
        }

        .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul>li:nth-of-type(2){
            margin-top: 20%;
        }
        .center-center>.t-center>div:nth-of-type(1)>div:nth-of-type(2)>ul>li:nth-of-type(3){
            margin-top: 20%;
        }
    }


    /* 响应式布局，当屏幕小于1024px改变#app宽高 */
    @media screen and (max-width: 1024px) {


        #app {
            width: 1024px;
            height: 768px;

        }

        html {
            font-size: 7px;
        }
    }


    /* 响应式布局，当屏幕小于800px改变#app宽高 */
    @media screen and (max-width: 800px) {


        #app {
            width: 800px;
            height: 600px;

        }

        html {
            font-size: 6px;
        }
    }
</style>

<body>
    <!-- 容器 -->
    <div id="app">
        <!-- 容器=>container -->
        <div class="container">
            <!--container=>上部 -->
            <div class="top">
                <!-- container=>上部=>文字 -->
                <div>城阳大数据治理平台</div>
            </div>
            <!-- container=>下部 -->
            <div class="bottom">



                <!-- container=>下部=>头部 -->
                <div class="header">
                    <ul>
                        <li>
                            <div>人口库</div>
                            <div>
                                <span>1567831</span>
                                <span>条</span>
                            </div>
                        </li>
                        <li>
                            <div>法人库</div>
                            <div>
                                <span>1567831</span>
                                <span>条</span>
                            </div>
                        </li>
                        <li>
                            <div>空间地理库</div>
                            <div>
                                <span>1567831</span>
                                <span>条</span>
                            </div>
                        </li>
                        <li>
                            <div>宏观经济库</div>
                            <div>
                                <span>1567831</span>
                                <span>条</span>
                            </div>
                        </li>
                        <li>
                            <div>公共安全库</div>
                            <div>
                                <span>1567831</span>
                                <span>条</span>
                            </div>
                        </li>
                        <li>
                            <div>人居环境库</div>
                            <div>
                                <span>1567831</span>
                                <span>条</span>
                            </div>
                        </li>
                        <li>
                            <div>经济运行库</div>
                            <div>
                                <span>1567831</span>
                                <span>条</span>
                            </div>
                        </li>
                        <li>
                            <div>民生幸福库</div>
                            <div>
                                <span>1567831</span>
                                <span>条</span>
                            </div>
                        </li>
                        <li>
                            <div>政务服务库</div>
                            <div>
                                <span>1567831</span>
                                <span>条</span>
                            </div>
                        </li>
                        <li>
                            <div>党建服务库</div>
                            <div>
                                <span>1567831</span>
                                <span>条</span>
                            </div>
                        </li>
                    </ul>
                </div>



                <!-- container=>下部=>中部 -->
                <!--     -->
                <div class="center">
                    <!--  -->
                    <!--  -->
                    <!--  -->
                    <div class="center-left">
                        <div>
                            <div>
                                <div class="u-top">
                                    <div>资源主题分类</div>
                                </div>
                                <div class="u-bottom">
                                    <div id="main" style="width:100%; height:100%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="j-top">
                                    <div>更新周期统计</div>
                                </div>
                                <div class="j-bottom">
                                    <div id="main2" style="width:100%; height:100%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <!--  -->
                    <!--  -->
                    <div class="center-center">
                        <div class="t-top">
                            <div>统计</div>
                        </div>
                        <div class="t-center">
                            <div>
                                <div>统计数据</div>
                                <div>
                                    <ul>
                                        <li>
                                            <div>31</div>
                                            <div>家</div>
                                            <div>接入单位数</div>
                                        </li>
                                        <li>
                                            <div>158</div>
                                            <div>个</div>
                                            <div>接入系统数</div>
                                        </li>
                                        <li>
                                            <div>967</div>
                                            <div>个</div>
                                            <div>接入目录数</div>
                                        </li>
                                        <li>
                                            <div>689</div>
                                            <div>个</div>
                                            <div>共享目录数</div>

                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="t-bottom">
                            <div>
                                <div>
                                    <div>
                                        <div class="jr-left">
                                            <span>接入数据量</span>
                                            <span>（条）</span>
                                        </div>
                                        <div class="jr-right">
                                            <ul>
                                                <li>0</li>
                                                <li>0</li>
                                                <li>3</li>
                                                <li>6</li>
                                                <li>1</li>
                                                <li>9</li>
                                                <li>2</li>
                                                <li>8</li>
                                                <li>4</li>
                                                <li>6</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <div>
                                        <div class="jr-left">
                                            <span>共享数据量</span>
                                            <span>（条）</span>
                                        </div>
                                        <div class="jr-right">
                                            <ul>
                                                <li>0</li>
                                                <li>0</li>
                                                <li>3</li>
                                                <li>6</li>
                                                <li>1</li>
                                                <li>9</li>
                                                <li>2</li>
                                                <li>8</li>
                                                <li>4</li>
                                                <li>6</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--  -->
                    <!--  -->
                    <!--  -->
                    <div class="center-right">
                        <div>
                            <div>
                                <div>
                                    <div class="top-top">接入单位数据量</div>
                                    <ul>
                                        <li>
                                            <div>城阳区住建局</div>
                                            <div>
                                                <div>No.1</div>
                                                <div>
                                                    <span>324568</span>
                                                    <span>条</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区行政审批局</div>
                                            <div>
                                                <div>No.2</div>
                                                <div>
                                                    <span>324568</span>
                                                    <span>条</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区发改局</div>
                                            <div>
                                                <div>No.3</div>
                                                <div>
                                                    <span>324568</span>
                                                    <span>条</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区卫生健康局</div>
                                            <div>
                                                <div>No.4</div>
                                                <div>
                                                    <span>324568</span>
                                                    <span>条</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区市场监督局</div>
                                            <div>
                                                <div>No.5</div>
                                                <div>
                                                    <span>324568</span>
                                                    <span>条</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区民政局</div>
                                            <div>
                                                <div>No.6</div>
                                                <div>
                                                    <span>324568</span>
                                                    <span>条</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区教体局</div>
                                            <div>
                                                <div>No.7</div>
                                                <div>
                                                    <span>324568</span>
                                                    <span>条</span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>


                        <!--  -->
                        <!--  -->
                        <div>
                            <div>
                                <div>
                                    <div class="left-left">各单位共享数据量</div>
                                    <ul>
                                        <li>
                                            <div>城阳区住建局</div>
                                            <div>
                                                <div>
                                                    <span>346700</span>
                                                    <span>条</span>
                                                </div>
                                                <div>No.1</div>

                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区行政审批局</div>
                                            <div>
                                                <div>
                                                    <span>286700</span>
                                                    <span>条</span>
                                                </div>
                                                <div>No.2</div>

                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区发改局</div>
                                            <div>
                                                <div>
                                                    <span>276700</span>
                                                    <span>条</span>
                                                </div>
                                                <div>No.3</div>

                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区卫生健康局</div>
                                            <div>
                                                <div>
                                                    <span>256700</span>
                                                    <span>条</span>
                                                </div>
                                                <div>No.4</div>

                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区市场监督局</div>
                                            <div>
                                                <div>
                                                    <span>216700</span>
                                                    <span>条</span>
                                                </div>
                                                <div>No.5</div>

                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区民政局</div>
                                            <div>
                                                <div>
                                                    <span>196700</span>
                                                    <span>条</span>
                                                </div>
                                                <div>No.6</div>

                                            </div>
                                        </li>
                                        <li>
                                            <div>城阳区教体局</div>
                                            <div>
                                                <div>
                                                    <span>186700</span>
                                                    <span>条</span>
                                                </div>
                                                <div>No.7</div>

                                            </div>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>




                <!--  -->
                <!-- container=>下部=>尾部 -->
                <div class="footer">
                    <div class="footer-content">
                        <div class="footer-content-top">
                            <div></div>
                            <div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div>系统接入目录数</div>
                        </div>
                        <div class="footer-content-bottom">
                            <ul>
                                <li>
                                    <div>
                                        <div>1</div>
                                        <div>城阳区住建区</div>
                                    </div>
                                    <div>
                                        <div>
                                            <span>65</span>
                                            <span>个</span>
                                        </div>
                                        <div></div>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div>2</div>
                                        <div>城阳区行政审批局</div>
                                    </div>
                                    <div>
                                        <div>
                                            <span>54</span>
                                            <span>个</span>
                                        </div>
                                        <div></div>

                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div>3</div>
                                        <div>城阳区发改局</div>
                                    </div>
                                    <div>
                                        <div>
                                            <span>48</span>
                                            <span>个</span>
                                        </div>
                                        <div></div>

                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div>4</div>
                                        <div>城阳区市场监管局</div>
                                    </div>
                                    <div>
                                        <div>
                                            <span>42</span>
                                            <span>个</span>
                                        </div>
                                        <div></div>

                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div>5</div>
                                        <div>城阳区卫生健康局</div>
                                    </div>
                                    <div>
                                        <div>
                                            <span>38</span>
                                            <span>个</span>
                                        </div>
                                        <div></div>

                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div>6</div>
                                        <div>城阳区民政局</div>
                                    </div>
                                    <div>
                                        <div>
                                            <span>35</span>
                                            <span>个</span>
                                        </div>
                                        <div></div>

                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div>7</div>
                                        <div>城阳区教体局</div>
                                    </div>
                                    <div>
                                        <div>
                                            <span>25</span>
                                            <span>个</span>
                                        </div>
                                        <div></div>

                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <div>8</div>
                                        <div>城阳区交通局</div>
                                    </div>
                                    <div>
                                        <div>
                                            <span>21</span>
                                            <span>个</span>
                                        </div>
                                        <div></div>

                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="./echartsjs/echarts.js"></script>
    <script src="./echartsjs/echarts-option.js"></script>
</body>

</html>